<ion-header>

  <ion-navbar>
    <ion-title>{{ 'ITEM_CREATE_TITLE' | translate }}</ion-title>
    <ion-buttons start>
      <button ion-button (click)="cancel()">
        <span color="primary" showWhen="ios">
          {{ 'CANCEL_BUTTON' | translate }}
        </span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button (click)="done()" [disabled]="!isReadyToSave" strong>
        <span color="primary" showWhen="ios">
          {{ 'DONE_BUTTON' | translate }}
        </span>
        <ion-icon name="md-checkmark" showWhen="core,android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content>
  <form *ngIf="form" [formGroup]="form" (ngSubmit)="createItem()">
    <input type="file" #fileInput style="visibility: hidden; height: 0px" name="files[]" (change)="processWebImage($event)" />
    <div class="profile-image-wrapper" (click)="getPicture()">
      <div class="profile-image-placeholder" *ngIf="!this.form.controls.profilePic.value">
        <ion-icon name="add"></ion-icon>
        <div>
          {{ 'ITEM_CREATE_CHOOSE_IMAGE' | translate }}
        </div>
      </div>
      <div class="profile-image" [style.backgroundImage]="getProfileImageStyle()" *ngIf="this.form.controls.profilePic.value"></div>
    </div>
    <ion-list>
      <ion-item>
        <ion-input type="text" placeholder="{{ 'ITEM_NAME_PLACEHOLDER' | translate }}" formControlName="name"></ion-input>
      </ion-item>
      <ion-item>
        <ion-input type="text" placeholder="{{ 'ITEM_ABOUT_PLACEHOLDER' | translate }}" formControlName="about"></ion-input>
      </ion-item>
    </ion-list>
  </form>
</ion-content>